{layout name="./base/base_back"}
		<title></title>
		<link rel="stylesheet" type="text/css" href="/front/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/orderInfo.css"/>
		<link rel="stylesheet" type="text/css" href="/front/css/weifeng.css"/>
		<script src="/front/js/index.js"></script>	
		<!--未登录时订单信息开始-->
		<div id="nologin-orderinfo-box">
			<form action="/order/saveorder" method="post">
				<div class="nologin-orderinfo">
					<div class="position-flow">
						<span style="font-size: 16px;">您的位置：</span>
						<span class="present-place"><a href="{php} echo url('/web/index','','','www') {/php}">首页</a> ><a href="{php} echo url('/filter/exlist','','','www') {/php}"> 交换房车选择</a> ><a href="/reserve/caravandetail?id=8&sdate={$ss}&edate={$ee}"> 房车详情</a></span>
						<span> > 填写订单 > 在线支付 > 预订成功 </span>
					</div>
					<input type="hidden" name="take_car_date" value="{$ss}">
					<input type="hidden" name="leave_car_date" value="{$ee}">
					<input type="hidden" name="take_car_area" value="{$carinfo.camps.address}">
					<input type="hidden" name="leave_car_area" value="{$carinfo.camps.address}">
					<input type="hidden" name="caravan_id" value="{$carinfo.id}">
					<input type="hidden" name="source" value="1">
						<div class="nologin-orderinfo-left">
							<div class="nologin-contactinfo">
								<h3>联系人信息</h3>
								<div class="form-group-input">
									<div class="input-title">手机号码<span id="phone_error" style="color: red;"></span></div>
									<input type="text" name="phone"  placeholder="请输入您的手机号码"/>
								</div>
								<div class="form-group-input">
									<div class="input-title">邮箱地址<span id="emailerror" style="color: red;"></span></div>
									<input type="text" name="email"  placeholder="请输入您的邮箱"/>
								</div>
								<div class="form-group-input">
									<div class="input-title">入住客人姓名<span id="nameerror" style="color: red;"></span></div>
									<input type="text" name="name" placeholder="请输入入住客人姓名"/>
								</div>
							</div>
							<div class="nologin-logininfo">
								<h3>登录信息</h3>
								<p><a href="###">登录</a>后查看旅行币使用或优惠信息</p>
							</div>
							<div class="clause-submit">
								<div class="service-clause">
									<input type="checkbox" value="1" checked name="Protocol"/>同意<a href="###">《房车营地规则和服务条款》</a>
								</div>
								<div class="nologin-submit">
									<span id="codeerror" style="color:#ea5404;"></span>
									<input type="text" name="imgCode"  placeholder="请输入验证码"/><label for=""><img  id="captcha_img" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?d='+Math.random();" alt="点击更换" title="点击更换" src="{:captcha_src()}" class="m"></label>
									<button type="submit">提交订单</button>
								</div>
							</div>
						</div>
						</form>
						<div class="nologin-orderinfo-right">
							<div class="nologin-carvan-cover">
							<i></i>
							</div>
							<!-- 房车图片 -->
							<style type="text/css">
								.nologin-orderinfo-right .nologin-carvan-cover i {
								  display: block;
								  background: url("{php}if(!empty($picCaravan['0'])){ echo $picCaravan['0'];}else{echo '';}{/php}") no-repeat;
								  background-size: cover;
								  background-position: center center;
								  height: 100%;
								}
							</style>
							<div class="cost-caravaninfo">
							<div class="nologin-carvaninfo">
								<h4><a href="/reserve/caravandetail?id=8&sdate={$ss}&edate={$ee}">{$carinfo.name}</a></h4>
								<p class="nologin-camp"><a href="###">{$carinfo.camps.name}</a></p>
								<p>地址：<span>{$carinfo.camps.address}</span></p>
							</div>
							<div class="nologin-live-time">
								<ul>
									<li class="nologin-time">
										<p>入住</p>
										<p>{$ss}</p>
									</li>
									<li class="nologin-img"><img src="/front/img/jt.png" alt="" /></li>
									<li class="nologin-time">
										<p>离开</p>
										<p>{$ee}</p>
									</li>
								</ul>
							</div>
							<div class="nologin-cost-list">
								<ul>
									<li class="cost">
										<p class="unit-price">{$days}日<em class="nologin-help"></em></p>
										<p class="count-price">{$total_intergral}旅行币</p>
										<ul class="help-explain price-explain" style="display: none;">
											<li class="close-prompt"></li>
											<li>Note</li>
											<li>每日基本价格{$carinfo.camps.travel_money_base}周末按1.25,节日按1.5。相乘得出总价</li>
										</ul>
									</li>
									<li class="cost">
										<p class="service-title">服务费</p>
										<p class="service-charge"><i>¥</i>0</p>
									</li>
									<li class="cost">
										<p class="pledge">押金<em class="nologin-help"></em></p>
										<p class="cash-pledge"><i>¥</i>{$deposit}</p>
										<ul class="help-explain pledge-explain" style="display: none;">
											<li class="close-prompt"></li>
											<li>Note</li>
											<li>会员离开30天后无损坏和交通违章，押金全部退还</li>
										</ul>
									</li>
								</ul>
							</div>
							<div class="nologin-allcost">
							<p>
								<span class="total-pay">共需支付</span>
								<span class="nologin-all-cash">{$total_intergral}旅行币</span>
							</p>
							<p class="other-cash"><i>+ ¥</i>200</p>
						</div>
						</div>
					</div>
				</div>
			
		</div>
		<!--未登录时订单信息结束-->
		<script type="text/javascript" src="/jquery.js"></script>		
		<script type="text/javascript">
		    	$(function(){
		    		//真实姓名
		    		$("input[name='real_name']").blur(function(){
		    			var real_name = $('input[name="real_name"]').val();
		    			//不能为空
		    			if(!$.trim(real_name)) {
							$("input[name='real_name']").css({border: "1px solid red"});
							$("#nameerror").html("必填");
							return false;
		    			}else{
		    				$("input[name='real_name']").css({border: "1px solid green"});
							$("#nameerror").html("");
		    			}
		    		})
		    		//邮箱
		    		$("input[name='email']").blur(function(){
		    			var email = $('input[name="email"]').val();
		    			//不能为空
		    			if(!$.trim(email)) {
							$("input[name='email']").css({border: "1px solid red"});
							$("#emailerror").html("必填");
							return false;
		    			}else{
		    				$.get('/reserve/checkemail?email='+$("input[name='email']").val(),function(data) {
								$("input[name='email']").css({border: "1px solid green"});
								$("#emailerror").html("");
								if (data===0) {
									$("input[name='email']").css({border: "1px solid red"});
									$("#emailerror").html("格式不正确");
								}
							});
		    			}
		    		})
		    		//手机格式
		    		$("input[name='phone']").blur(function(){
		    			var phone = $('input[name="phone"]').val();
		    			//不能为空
		    			if(!$.trim(phone)) {
							$("input[name='phone']").css({border: "1px solid red"});
							$("#phone_error").html("必填");
							return false;
		    			}
		    			//手机号格式是否满足
		    			if((/^1[3|4|5|7|8]\d{9}$/.test(phone)) || (/(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$)|(^$)/.test(phone))){
							$("input[name='phone']").css({border: "1px solid green"});
							$("#phone_error").html("");
		    			}else {
							$("input[name='phone']").css({border: "1px solid red"});
							$("#phone_error").html("格式不正确");
							return false;
		    			}
		    		})
		    		//图片验证码验证
		    		$('input[name="imgCode"]').keyup(function(){
		    			var imgCodele = $('input[name="imgCode"]').val().length;
		    			if (imgCodele>3) {
		    				var imgCode = $('input[name="imgCode"]').val();
		    			//不能为空
		    			if(!$.trim(imgCode)) {
							$("input[name='imgCode']").css({border: "1px solid red"});
							$("#codeerror").html("请输入验证码");
							return false;
		    			}else {
		    				$.get('/reserve/checkcode?imgCode='+$("input[name='imgCode']").val(),function(data) {
								$("input[name='imgCode']").css({border: "1px solid green"});
								$("#codeerror").html("");
								if (data===0) {
									$("input[name='imgCode']").css({border: "1px solid red"});
									$("#codeerror").html("验证码错误");
								}
							});
		    				}
		    			}
		 			})	

		    	})
		</script>